<template>
	<!--留言列表-->
	<div style="max-width: 600px">

		<div v-if="Array.isArray(ambList) && ambList.length !== 0">

			<div v-for="mb in ambList">

				<div> {{ mb.contentText }} </div>
				<span></span>
				<br />
        <div class="image-container">
          <div v-for="amc in mb.mbcList">
              <div v-if="amc.contentType == 'img'">
                <el-image style="width: 100px; height: 100px" :src="api_url + '/api/v1/aha/external/file/img/' + amc.content" fit="scale-down" />
              </div>
          </div>
        </div>

				<br />
				<el-row :gutter="20">
					<el-col :span="2">
						<div>
							{{ mb.likeNum }}
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
								class="bi bi-hand-thumbs-up" viewBox="0 0 16 16">
								<path
									d="M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2 2 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a10 10 0 0 0-.443.05 9.4 9.4 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a9 9 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.2 2.2 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.9.9 0 0 1-.121.416c-.165.288-.503.56-1.066.56z" />
							</svg>
						</div>
					</el-col>
					<el-col :span="2">
						<div>
							{{ mb.commentNum }}
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
								class="bi bi-chat-left-dots" viewBox="0 0 16 16">
								<path
									d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
								<path
									d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" />
							</svg>
						</div>
					</el-col>
					<el-col :span="5">
						<el-text class="mx-1" type="info">IP 属地{{ mb.ip }}</el-text>
					</el-col>
					<el-col :span="8">
					</el-col>
					<el-col :span="7">
						<el-text class="mx-1" type="info">{{ mb.createTime }}</el-text>
					</el-col>
				</el-row>
				<el-divider content-position="right">{{ mb.name }}</el-divider>
			</div>
		</div>
		<div v-else>
			<el-empty :image-size="200" />
		</div>
	</div>


</template>

<script  lang="ts" setup>
import {ref} from 'vue'
import {StarFilled} from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'

const imageUrl = ref('')

let api_url = import.meta.env.VITE_API_URL

defineProps({
	ambList: [{
		anonymousEnable: Boolean,
		commentNum: String,
		createTime: Date,
		id: Number,
		ip: String,
		updateTime: Date,
		name: String,
		sessionKey: String,
		userId: Number,
		likeNum: Number,
		mbcList: [{
			content: String,
			contentType: String,
			createTime: Date,
			id: Number,
			updateTime: Date
		}]
	}]
})

</script>



<style scoped>
.image-container {
           display: flex;
           justify-content: flex-start; /* 子元素在主轴（水平方向）的起始位置对齐 */
         }
</style>